<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  favoriteProducts: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:favoriteProducts'])

// 取消收藏
const removeFavorite = (productId) => {
  // 这里应该调用API取消收藏
  // API调用后端
  // removeFavoriteAPI(productId).then(() => {
  //   ElMessage.success('取消收藏成功')
  //   loadFavoriteProducts()
  // })
  
  // 模拟取消收藏成功
  const updatedFavorites = props.favoriteProducts.filter(item => item.id !== productId)
  emit('update:favoriteProducts', updatedFavorites)
  ElMessage.success('取消收藏成功')
}
</script>

<template>
  <el-card class="favorites-card">
    <template #header>
      <div class="card-header">
        <h3>我的收藏</h3>
      </div>
    </template>
    
    <el-empty v-if="favoriteProducts.length === 0" description="暂无收藏商品" />
    
    <div v-else class="favorites-list">
      <el-card v-for="item in favoriteProducts" :key="item.id" class="favorite-item" shadow="hover">
        <div class="product-image">
          <img :src="item.image" :alt="item.name">
        </div>
        <div class="product-info">
          <h4>{{ item.name }}</h4>
          <p class="brand">{{ item.brand }}</p>
          <p class="price">¥{{ item.price }}</p>
        </div>
        <div class="item-actions">
          <el-button type="primary" text>查看详情</el-button>
          <el-button type="danger" text @click="removeFavorite(item.id)">
            <el-icon><Star /></el-icon>
            取消收藏
          </el-button>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<style scoped>
.favorites-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
}

.favorites-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.favorite-item {
  display: flex;
  flex-direction: column;
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 10px 0;
}

.product-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
}

.brand {
  color: #666;
  margin: 0 0 5px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
  margin: 0;
}

.item-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>